@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap');

:root {
  /* 法律与冒险风格的颜色主题 */
  --primary-color: #1a2b48; /* 深蓝色 - 法律的庄重感 */
  --secondary-color: #a67c00; /* 古典金色 - 代表法律天平 */
  --accent-color: #8b0000; /* 深红色 - 代表案件争议 */
  --light-color: #f8f0dd; /* 羊皮纸颜色 - 古老的法律文书 */
  --adventure-color: #5c8374; /* 森林绿 - 代表冒险精神 */
  --dark-color: #0f172a; /* 深夜蓝 - 代表神秘感 */
  
  /* 字体设置 */
  --title-font: 'Cinzel', 'Noto Serif SC', serif;
  --body-font: 'Noto Serif SC', serif;
  
  /* 间距和圆角 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  
  /* 阴影效果 */
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.1);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.15);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.2);
}

body {
  margin: 0;
  font-family: var(--body-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f0f2f5;
}

/* 设置H1-H6标题样式 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--title-font);
  letter-spacing: 0.5px;
}

/* 定义动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes blinking {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes goldGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(166, 124, 0, 0.5); }
  50% { box-shadow: 0 0 20px rgba(166, 124, 0, 0.8); }
}

@keyframes floatingScroll {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(1deg); }
  75% { transform: translateY(5px) rotate(-1deg); }
}

/* 添加通用动画类 */
.fade-in {
  animation: fadeIn 0.6s ease-in-out;
}

.slide-up {
  animation: slideUp 0.8s ease-in-out;
}

.scale-in {
  animation: scaleIn 0.5s ease-out;
}

.pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

.shake {
  animation: shake 0.5s ease-in-out;
}

.gold-glow {
  animation: goldGlow 3s ease-in-out infinite;
}

.floating-scroll {
  animation: floatingScroll 5s ease-in-out infinite;
}

/* 滚动效果 */
.scroll-effect {
  overflow: hidden;
}

.scroll-effect > * {
  transform: translateY(20px);
  opacity: 0;
  animation: slideUp 0.6s ease-in-out forwards;
}

/* 每一项延迟出现 */
.scroll-effect > *:nth-child(1) { animation-delay: 0.1s; }
.scroll-effect > *:nth-child(2) { animation-delay: 0.2s; }
.scroll-effect > *:nth-child(3) { animation-delay: 0.3s; }
.scroll-effect > *:nth-child(4) { animation-delay: 0.4s; }
.scroll-effect > *:nth-child(5) { animation-delay: 0.5s; }
.scroll-effect > *:nth-child(6) { animation-delay: 0.6s; }
.scroll-effect > *:nth-child(7) { animation-delay: 0.7s; }
.scroll-effect > *:nth-child(8) { animation-delay: 0.8s; }
.scroll-effect > *:nth-child(9) { animation-delay: 0.9s; }
.scroll-effect > *:nth-child(10) { animation-delay: 1s; }

/* 法律主题布局样式 */
.law-adventure-layout {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: #f5f5f7;
}

/* 法律主题页眉 */
.law-adventure-header {
  background: linear-gradient(135deg, var(--primary-color), #2c3e50);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.law-adventure-header h2 {
  color: var(--light-color);
  margin: 0;
  font-weight: 600;
  letter-spacing: 1px;
}

/* 法律主题内容区 */
.law-adventure-content {
  padding: 24px;
  position: relative;
  z-index: 1;
}

/* 法律主题卡片 */
.law-adventure-card {
  background-color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 24px;
  position: relative;
  margin-bottom: 24px;
  border: 1px solid rgba(166, 124, 0, 0.3);
  transition: transform 0.3s, box-shadow 0.3s;
}

.law-adventure-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* 法律主题页脚 */
.law-adventure-footer {
  background-color: var(--primary-color);
  color: var(--light-color);
  text-align: center;
  padding: 16px;
  font-family: var(--title-font);
  font-size: 14px;
}

/* 法律主题按钮 */
.law-adventure-button {
  background: linear-gradient(135deg, var(--secondary-color), #8a6700);
  color: white;
  border: none;
  box-shadow: 0 4px 8px rgba(166, 124, 0, 0.3);
  font-family: var(--title-font);
  letter-spacing: 1px;
  transition: all 0.3s;
}

.law-adventure-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(166, 124, 0, 0.4);
  background: linear-gradient(135deg, #b78b00, var(--secondary-color));
}

.law-adventure-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(166, 124, 0, 0.3);
}

/* 法律主题装饰元素 */
.law-decoration-scales {
  position: absolute;
  font-size: 20rem;
  top: 15%;
  left: 2%;
  color: var(--secondary-color);
  opacity: 0.1;
  z-index: 0;
  transform: rotate(-5deg);
}

.law-decoration-gavel {
  position: absolute;
  font-size: 20rem;
  bottom: 15%;
  right: 2%;
  color: var(--secondary-color);
  opacity: 0.1;
  z-index: 0;
  transform: rotate(15deg);
}

/* 黄金比例装饰框架 */
.golden-frame {
  border: 1px solid var(--secondary-color);
  padding: 20px;
  position: relative;
  margin: 20px 0;
}

.golden-frame:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 1px solid var(--secondary-color);
  opacity: 0.6;
}

.golden-frame:after {
  content: "⚖";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  padding: 0 10px;
  font-size: 20px;
  color: var(--secondary-color);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .law-decoration-scales,
  .law-decoration-gavel {
    font-size: 10rem;
  }
  
  .law-adventure-content {
    padding: 16px;
  }
  
  .law-adventure-card {
    padding: 16px;
  }
}

/* 为动画组件准备的样式 */
.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}
